<template>
  <div>
      <div :class="['lyrics-main', lyricName]">
          <div class="lyrics" ref="lyrics" v-if="lyricObj.length" :style="transform">
              <p :class="[isCurLyric(index)]" v-for="(item, index) in lyricObj" :key="index">{{item.txt}}</p>
          </div>
          <div v-else class="lyric-empty">
              <p v-if="lyric">纯音乐，无歌词</p>
              <p v-else>歌词加载中......</p>
          </div>
      </div>
      <div class="lyric-more" v-if="local === 'page' && lyricObj.length > 6">
          <p v-if="!isFull">...</p>
          <span @click.stop="fullLyric">{{ this.isFull ? '收起' : '展开'}}</span>
      </div>
  </div>
</template>

<script>
export default {
  name: 'lyrics',
  components: {},
  props: {
      sId: {
          type: [Number, String],
          default: 0
      },
      currentTime: {
          type: Number,
          default: 0
      },
      local: {
          type: String,
          default: ''
      }
  },
  data () {
      // 这里存放数据
      return {
          lyric: null,
          lyricObj: [],
          curIndex: 0,
          isFull: false
      }
  },
  mounted () {
      this.getLyrics(this.sId)
  },
  // 监听属性 类似于data概念
  computed: {
      lyricName () {
          return [this.local === 'page' ? 'page-lyrics' : '', this.isFull ? 'fullLyrics' : '']
      },
      isCurLyric () {
          return (index) => {
              return index === this.curIndex  ? 'active' : ''
          }
      },
      // 歌词实时滚动
      transform () {
          if (this.curIndex > 6) {
              return `transform: translateY(-${30 * (this.curIndex - 6)}px)`
          } else {
              return 'transform: translateY(0)'
          }
      }
  },
  // 方法集合
  methods: {
      async getLyrics (id) {
          const { data: res } = await this.$http.lyrics({ id: id })

          if (res.code !== 200) {
              return this.$msg.error('数据请求失败')
          }
          this.formartLyric(res.lrc)
      },
      formartLyric (lrc) {
          const lrcReg = /^\[(\d{2}):(\d{2}.\d{2,})\]\s*(.+)$/
          if (!lrc) {
              this.lyric = true
              return
          }
          const lyricLis = lrc.lyric.split('\n')

          this.lyric = lrc.lyric
          lyricLis.forEach(item => {
              const arr = lrcReg.exec(item)

              if (!arr) {
                  return
              }

              this.lyricObj.push({ t: arr[1] * 60 * 1 + arr[2] * 1, txt: arr[3] })
          })

          // 根据时间轴重排顺序
          this.lyricObj.sort((a, b) => {
              return a.t - b.t
          })
      },
      findCurIndex (t) {
          for (let i = 0; i < this.lyricObj.length; i++) {
              if (t <= this.lyricObj[i].t) {
                  return i
              }
          }
          return this.lyricObj.length
      },
      // 页面歌词可以展开查看更多
      fullLyric () {
          this.isFull = !this.isFull
      }
  },
  watch: {
      sId (newVal, oldVal) {
          this.lyric = null
          this.lyricObj = []
          this.curIndex = 0
          this.getLyrics(newVal)
      },
      currentTime (newVal, oldVal) {
          // 无歌词时间的时候 不做动画滚动
          if (!this.lyricObj.length) {
              return
          }
          this.curIndex = this.findCurIndex(newVal) - 1
      }
  }
}
</script>
<style scoped lang="less">
.lyrics-main {
  height: 100%;
  max-height: 390px;
  background-color: #fff;
  overflow-y: auto;
  transition: all 1.5s ease-in-out;
}

.lyrics {
  font-size: 0;
  transform: translateY(0);
  transition: transform 1.5s ease-in-out;

  /deep/p {
      margin: 0;
      line-height: 30px;
      font-size: 14px;
      font-weight: 300;

      &.active {
          color: @color-theme;
      }
  }
}
.lyric-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 100px;
  color: @color-theme;

  ~ .more-lyric {
      display: none;
  }
}
.page-lyrics {
  color: #666;
  overflow: hidden;

  .lyric-empty {
      justify-content: left;
  }

  &.fullLyrics {
      max-height: none;
  }
}

.lyric-more span {
  display: inline-block;
  line-height: 30px;
  cursor: pointer;
  color: @color-theme;
}
</style>
